<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" label-width="130px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="params.realName" placeholder="请输入姓名" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号">
              <el-input v-model="params.username" placeholder="请输入手机号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="提现时间">
              <el-date-picker
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                v-model="time"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提现状态">
              <el-select v-model="params.withdrawStatus">
                <el-option
                  v-for="item in StatusOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="转出银行">
              <branklist @brankfun="brankfun" v-model="params.outBankCard"></branklist>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="提现金额">
              <div style="display: flex;">
                <el-input v-model="params.withdrawMin" size="mini" placeholder="最低金额" type="number"></el-input>
                <span style="padding:0 5px;">—</span>
                <el-input v-model="params.withdrawMax" size="mini" placeholder="最高金额" type="number"></el-input>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-button type="primary" @click="Examination('',0)">审核</el-button>
            <el-button type="primary" @click="changeBrank">修改银行卡</el-button>
          </el-col>
          <el-col :span="12" style="text-align: right;">
            <el-button type="primary" @click="searchFn">查询</el-button>
            <el-button type="primary" @click="excelEvent">导出</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- table -->
    <div class="table" v-loading="tableLoading">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="realName" align="center" label="服务商姓名"></el-table-column>
        <el-table-column prop="username" align="center" label="服务商手机号">
           <template slot-scope="scope">
            <span>{{scope.row.username | phonereg}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="outBankCard" align="center" label="转出银行卡"></el-table-column>
        <el-table-column prop="withdrawAmount" align="center" label="提现金额"></el-table-column>
        <el-table-column prop="bankName" align="center" label="提现银行"></el-table-column>
        <el-table-column prop="bankCard" align="center" label="银行卡号"></el-table-column>
        <el-table-column prop="createdTime" align="center" label="提现时间"></el-table-column>
        <el-table-column prop="withdrawStatus" align="center" label="提现状态">
          <template slot-scope="scope">
            <span>{{scope.row.withdrawStatus|withdrawStatusFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" align="center" label="备注"></el-table-column>
        <el-table-column prop="checkedTime" align="center" label="提现审核时间"></el-table-column>
        <el-table-column prop="admin" align="center" label="操作人"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <el-button
                v-if="scope.row.withdrawStatus==1"
                type="text"
                @click="Examination(scope.row,1,scope.row.id)"
              >修改</el-button>
              <el-button
                v-if="scope.row.withdrawStatus==0"
                type="text"
                @click="Examination(scope.row,0,scope.row.id)"
              >审核</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block" style="margin: 40px 0;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 审核 -->
    <el-dialog title="审核" :visible.sync="dialogVisible" width="468px">
      <el-form
        :rules="ruleForm"
        ref="ruleForm"
        :inline="true"
        label-width="80px"
        label-position="right"
        :model="datas"
      >
        <el-form-item label="审核意见" prop="opinion">
          <p style="display: flex;">
            <el-radio v-if="istabledata" v-model="datas.radio" label="0">待审核</el-radio>
            <el-radio v-if="!istabledata" v-model="datas.radio" label="1">审核通过</el-radio>
            <el-radio v-if="!istabledata" v-model="datas.radio" label="2">审核驳回</el-radio>
          </p>
        </el-form-item>
        <el-form-item label="备注" prop="remark" v-if="istabledata || datas.radio==2">
          <el-input v-model="datas.remark"></el-input>
        </el-form-item>
        <el-form-item label="转出银行" prop="region" v-if="datas.radio==1">
          <branklist :bankNumber="datas.bankNumber" @brankfun="brankfun"></branklist>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="rewardSure()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 银行卡修改 -->
    <el-dialog title="银行卡修改" :visible.sync="dialogbrank" width="468px" @close="closeBank">
      <el-form :rules="bankRules" :inline="true" label-width="80px" label-position="right">
        <el-form-item label="转出银行" prop="bankRegion">
          <branklist @brankfun="brankfun" ref="branklist"></branklist>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogbrank = false">取 消</el-button>
        <el-button type="primary" @click="brankSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import branklist from "@/components/branklist";
import { getList, excelExport, submitLast } from "@/api/rewardverify";
import { exportfile } from "@/api/exporfile";

export default {
  name: "rewardverify",
  components: {
    branklist
  },
  data() {
    return {
      rowInfo: null,
      ValuableFlaf: false,
      // loading层
      tableLoading: false,
      //提交查询数据
      params: {
        pageNum: 1,
        pageSize: 10,
        username: "",
        realName: "",
        withdrawStatus: "",
        startTime: "",
        endTime: "",
        outBankCard: "",
        withdrawMin: "",
        withdrawMax: ""
      },

      ids: "",
      datas: { radio: '1' ,remark:null,bankNumber:""},
      tableData: [],
      total: 0,
      time: [],
      multipleSelection: [],
      dialogVisible: false,

      istabledata: true,
      dialogbrank: false,
      //提现状态下拉框
      StatusOption: [
        { id: "", name: "全部" },
        { id: "0", name: "待审核" },
        { id: "1", name: "审核通过" },
        { id: "2", name: "审核驳回" }
      ],
      //校验规则
      ruleForm: {
        opinion: [
          { required: true, message: "请选择审核意见", trigger: "blur" }
        ],
        remark: [{ required: true, message: "备注必填", trigger: "blur" }],
        // region: [{ required: true, message: "请选择银行卡", trigger: "change" }]
      },
      bankRules: {
        bankRegion: [
          // { required: true, message: "请选择银行卡", trigger: "change" }
        ]
      },
      //选择的银行卡号
      banckNumber: "",
      //区分审核、修改弹窗的开关
      typeFlag: ""
    };
  },
  inject: ["reload"],
  //过滤
  filters: {
    withdrawStatusFilter(e) {
      switch (e) {
        case "0":
          return "待审核";
          break;
        case "1":
          return "审核通过";
          break;
        case "2":
          return "审核驳回";
          break;
        default:
          return "暂无";
          break;
      }
    }
  },
  mounted() {
    this.getList(this.params);
  },
  methods: {
    //服务商账户管理列表
    getList(e) {
      this.tableLoading = true;
      const datas = e;
      getList(datas)
        .then(res => {
          // console.log(res);
          if (!res.data.code) {
            this.tableData = res.data.data.responseDTOS;
            this.total = res.data.data.count;
          } else {
            this.$message.error(res.data.msg);
          }
          this.tableLoading = false;
        })
        .catch(error => {
          this.$message.error(error);
          this.tableLoading = false;
        });
    },
    // 查询
    searchFn() {
      this.params.pageNum = 1;
      // console.log(this.params)
      if (this.time != null) {
        if (this.time.length) {
          this.params.startTime = this.time[0];
          this.params.endTime = this.time[1];
        }
      } else {
        this.params.startTime = null;
        this.params.endTime = "";
      }
      this.getList(this.params);
    },
    //导出
    excelEvent() {
      let datas = { ...this.params };
      excelExport(this.params).then(res => {
        exportfile(res);
      });
    },
    //转出银行
    brankfun(number) {
      // console.log(datas + "-----银行列表");
      this.banckNumber = number;
    },
    //单选框勾选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection.length);
    },
    //审核、修改弹框
    Examination(datas, type, id) {
      //审核
      if (type == 0) {
        this.rowInfo = datas;
        this.ValuableFlaf = true;
      }
      //type:0  审核
      //type:0 datas有值 待审核
      //type:1  修改银行卡
      this.datas.radio = "";
      this.datas.remark = "";
      this.ids = id;
      // console.log(this.ids);
      if (datas) {
        //有值table 页面
        this.dialogVisible = true;
        this.ValuableFlaf = true;
      } else {
        //列表页的群体操作
        if (this.multipleSelection.length >= 1) {
          this.dialogVisible = true;
        } else {
          this.$message({
            message: "请先勾选需要审核的数据",
            type: "warning"
          });
        }
      }
      this.istabledata = type;

      this.typeFlag = type;
      // console.log(this.typeFlag);

      // this.dialogVisible = true;
    },
    //修改银行卡弹框
    changeBrank() {
      if (this.multipleSelection.length >= 1) {
        this.dialogbrank = true;
        // this.$refs.branklist.value = "";
      } else {
        this.$message({
          message: "请先勾选需要修改银行卡的数据",
          type: "warning"
        });
      }
    },
    //修改银行卡弹框关闭
    closeBank() {
      // this.banckNumber = "";
      this.$refs.branklist.value = "";
    },
    //审核、修改参数
    change(status, flag) {
      let data = {
        status: status,
        remark: this.datas.remark,
        bankCard: this.banckNumber,
        ids: []
      };
      if (flag) {
        //当flag为真时，修改的id参数
        data.ids.push(this.ids);
      } else {
        // 审核的 id参数
        // if (flag) {
        //   //选择每一行的审核
        //   if (this.ValuableFlaf) {
        //     data.ids.push(this.rowInfo.id);
        //   }
        // } else {
        //批量审核
        //   this.multipleSelection.forEach(datas => {
        //     data.ids.push(datas.id);
        //   });
        // }
        if (this.multipleSelection.length >= 1) {
          //批量审核
          this.multipleSelection.forEach(datas => {
            data.ids.push(datas.id);
          });
        } else {
          //选择每一行的审核
          data.ids.push(this.rowInfo.id);
        }
      }

      this.submitLast(data);
    },
    //审核确定
    rewardSure() {
      // this.$refs[formName].validate((valid) => {
      //     if (valid) {
      //       alert('submit!');
      //     } else {
      //       console.log('error submit!!');
      //       return false;
      //     }
      //   });
      this.dialogVisible = false;
      //   console.log("审核");
      //审核（列表上方）
      if (this.typeFlag == 0) {
        // console.log(this.datas.radio);
        if (this.datas.radio == 1) {
          this.change(1, false);
        } else {
          this.change(2, false);
        }
        //修改（每一行）
      } else {
        this.change(0, true);
      }
    },
    //银行卡修改确定
    brankSure() {
      this.dialogbrank = false;
      //   console.log("银行卡修改");
      let data = {
        status: 0,
        remark: "",
        bankCard: this.banckNumber,
        ids: [],
        type: 1
      };
      this.multipleSelection.forEach(datas => {
        data.ids.push(datas.id);
      });
      this.submitLast(data);
    },
    //审核、修改复用请求
    submitLast(e) {
      const datas = e;
      submitLast(e)
        .then(res => {
          console.log(res);
          if (!res.data.code) {
            this.getList(this.params);
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          this.$message.error(error);
          this.tableLoading = false;
        });
    },
    // 改变页面条数
    handleSizeChange(val) {
      // this.params.pageNum = 1;
      this.params.pageSize = val;
      this.getList(this.params);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.getList(this.params);
    }
  }
};
</script>
<style scoped>
/* 分页 */
.pagesCon {
  height: 40px;
  margin-top: 20px;
}
.pagesCon > div {
  float: right;
}
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
</style>